<template>
	<view class="addbox">
		<u-navbar :title="title"></u-navbar>
		<view class="row">
			<u-field v-model="fullname" :border-bottom="false" :label="$t('收件人')" :placeholder="$t('请填写收货人姓名')">
			</u-field>
		</view>
		<view class="row">
			<u-field v-model="phone" type="number" :border-bottom="false" maxlength="11" :label="$t('手机号')"
				:placeholder="$t('请填写手机号')">
			</u-field>
		</view>
		<view class="c-area">
			<view>{{ $t('所在地区')}}</view>
			<pickerAddress @change="changeAddress" :parent-data="addressList">
				<view class="c-area-view">
					<text v-if="province">{{province}} {{city}} {{area}}</text>
					<text v-else class="tip">{{ $t('点击选择地址') }}</text>
				</view>
			</pickerAddress>
		</view>
		<!-- <view class="row" @click="show = true">
			<u-field v-model="address" disabled right-icon="arrow-right" :border-bottom="false" :label="$t('所在地区')"
				:placeholder="$t('点击选择地址')">
			</u-field>
		</view> -->
		<view class="row">
			<u-field type="textarea" v-model="addressInfo" :border-bottom="false" :label="$t('详细地址')"
				:placeholder="$t('详细的地址，如道路、小区、门牌号等')">
			</u-field>
		</view>
		<view class="row">
			<u-field disabled :border-bottom="false" :label="$t('默认地址')">
				<view slot="right" class="">
					<u-switch v-model="isdefault" active-color="#2AC2B3" inactive-color="#E6E6E6"></u-switch>
				</view>
			</u-field>
		</view>
		

		<button class="btn" @click="add" v-if="type == 1">{{$t('保存地址')}}</button>
		<button class="btn" @click="edit" v-else>{{$t('修改地址')}}</button>
		<!-- <u-picker mode="region" v-model="show" @confirm="confirm"></u-picker> -->
	</view>
</template>

<script>
import pickerAddress from '@/uni_modules/hu-pickerAddress/components/hu-pickerAddress/hu-pickerAddress.vue'
export default {
	components: {
	 pickerAddress
   },
	data() {
		return {
			title: '',
			fullname: '',
			phone: '',
			address: '',
			addressInfo: '',
			isdefault: false,
			show: false,
			province: '',
			city: '',
			area: '',
			id: '',
			type: '',
			allArea : null,
			addressList: []
		}
	},
	onLoad(option) {
		this.type = option.type;
		if (option.type == 1) {
			this.title = this.$t('新增地址')
		} else if (option.type == 2) {
			this.id = option.id
			this.getData()
			this.title = this.$t('地址编辑')
		}

	},
	onShow() {
		  if (!uni.getStorageSync("user")) {
		      uni.redirectTo({
		      	url:'/pages/my/login'
		      })
		  }
	},
	methods: {
		changeAddress(val){
			const { data } = val;
			this.province = data[0];
			this.city = data[1];
			this.area = data[2];
		},
		getData() {
			this.$http({
				url: "api/member/get_address",
				data: {
					address_id: this.id
				}
			}).then(res => {
				if (res.data.code == 1) {
					let data = res.data.data
					this.addressList = [data.province, data.city, data.area]
					this.fullname = data.fullname
					this.phone = data.mobile
					this.province = data.province;
					this.city = data.city;
					this.area = data.area;
					this.address = data.province + ' ' + data.city + ' ' + data.area
					this.addressInfo = data.detailed
					this.isdefault = data.is_default == 1 ? true : false
				}
			}).catch(err => { });
		},
		edit() {
			this.$http({
				url: "api/member/edit_address",
				data: {
					fullname: this.fullname,
					mobile: this.phone,
					province: this.province,
					city: this.city,
					area: this.area,
					detailed: this.addressInfo,
					is_default: this.isdefault ? '1' : '0',
					address_id: this.id
				}
			}).then(res => {
				console.log(res);
				if (res.data.code == 1) {
					this.$tip.tip(this.$t('修改成功'))
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				} else {
					this.$tip.tip(res.data.msg)
				}
			}).catch(err => { });
		},
		add() {
			if (this.fullname == "") {
				this.$tip.tip(this.$t('请输入姓名'))
				return
			}
			if (this.$tip.phoneReg.test(this.phone) == false) {
				this.$tip.tip(this.$t('请填写正确的手机号'))
				return
			}
			// if (this.address == "") {
			// 	this.$tip.tip(this.$t('请选择地址'))
			// 	return
			// }
			if (this.addressInfo == "") {
				this.$tip.tip(this.$t('请输入详细地址'))
				return
			}
			this.$http({
				url: "api/member/add_address",
				data: {
					fullname: this.fullname,
					mobile: this.phone,
					province: this.province,
					city: this.city,
					area: this.area,
					detailed: this.addressInfo,
					is_default: this.isdefault ? '1' : '0'
				}
			}).then(res => {
				console.log(res);
				if (res.data.code == 1) {
					this.$tip.tip(this.$t('添加成功'))
					setTimeout(() => {
						uni.navigateBack()
					}, 500)
				} else {
					this.$tip.tip(res.data.msg)
				}
			}).catch(err => { });
		},
		confirm(val) {
			uni.setStorageSync('fee', val.province.value + '0000');
			if (val.province.label == '北京市') {
				this.address = val.province.label + " " + '北京市' + " " + val.area.label;
				this.province = val.province.label;
				this.city = '北京市';
				this.area = val.area.label;
			} else if (val.province.label == '天津市') {
				this.address = val.province.label + " " + '天津市' + " " + val.area.label;
				this.province = val.province.label;
				this.city = '天津市';
				this.area = val.area.label;
			} else if (val.province.label == '上海市') {
				this.address = val.province.label + " " + '上海市' + " " + val.area.label;
				this.province = val.province.label;
				this.city = '上海市';
				this.area = val.area.label;
			} else if (val.province.label == '重庆市' && val.city.label == '市辖区') {
				this.address = val.province.label + " " + '重庆市' + " " + val.area.label;
				this.province = val.province.label;
				this.city = '重庆市';
				this.area = val.area.label;
			} else {
				this.address = val.province.label + " " + val.city.label + " " + val.area.label;
				this.province = val.province.label;
				this.city = val.city.label;
				this.area = val.area.label;
			}
		},
	}
}
</script>

<style lang="scss" scoped>
page {
	background-color: #F4F4FC;
}

.addbox {
	position: relative;
	min-height: 100vh;
	.u-label-text {
		overflow: hidden;
	}
}

.row {
	width: 710rpx;
	padding: 10rpx 0;
	background-color: #fff;
	margin: 20rpx auto;
	border-radius: 10rpx;
}

.btn {
	width: 710rpx;
	position: absolute;
	left: 20rpx;
	bottom: 40rpx;
	background-color: #2AC2B3;
	color: #fff;
}
.c-area{
	    font-size: 30rpx;
	    padding: 16px 16px;
	    text-align: left;
	    /* position: relative; */
		border-radius: 5px;
	    color: #303133;
		background-color: #fff;
		width: 690rpx;
		overflow: hidden;
		margin: 11px auto;
		display: flex;
		width: 710rpx;
}
.c-area-view{
	width: 500rpx;
	/* background-color: red; */
	margin-left: 20rpx;
	.tip{
		color: grey;
		font-size: 24rpx;
	}
}
</style>
